<template>
    <div class="ordinaryIndex">
        <div class="ordinaryIndex_main">
            <!-- 横向滚动的横幅 -->
            <div class="banner-scroll">
                <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" scrolldelay="4" width="80%" height="30" align="left">血肉之躯离我去，灵魂精神随我在！</marquee>
            </div>

            <!-- 导航栏，7个：墓碑，生平简介，祭奠留言，纪念相册，纪念文集，快速建馆，返回首页 -->
            <div id="mubei_top_Menu">
                <div class="mubei_top_Menu_list">
                    <div class="mu_an mu_an1" @click="tabChange(7,'')">
                        <span>墓 碑</span>
                    </div>
                    <div class="mu_an mu_an2" @click="tabChange(1,'life')">
                        <span>生平简介</span>
                    </div>
                    <div class="mu_an mu_an3" @click="tabChange(2,'messages')">
                        <span>祭奠留言</span>
                    </div>
                    <div class="mu_an mu_an4" @click="tabChange(3,'photos')">
                        <span>纪念相册</span>
                    </div>
                    <div class="mu_an mu_an5" @click="tabChange(4,'article')">
                        <span>纪念文集</span>
                    </div>
                    <div class="mu_an mu_an6" @click="tabChange(5, '')">
                        <span>快速建馆</span>
                    </div>
                    <div class="mu_an mu_an7" @click="tabChange(6, '')">
                        <span>返回首页</span>
                    </div>
                </div>
            </div>

        </div>

        <!-- 墓地背景图，中间环伺墓碑，墓碑的中间是 竖向结构的墓地信息，包括：头像，名字（竖向显示） -->
        <main class="main-content">
            <img src="../../assets/images/ordinaryBg.png" alt="">

            <div class="cemetery-background">
                <!-- 中央墓碑区域 -->
                <div class="tombstone-area">
                    <img src="../../assets/images/ordinaryMuBei.png" alt="">
                    <div class="tombstone"> 
                        <!-- 墓碑主体 - 竖向结构 -->
                        <div class="tombstone-body">
                            <!-- 头像 -->
                            <div class="portrait-frame">
                                <img :src="muDetail.avatar" alt="纪念照片" class="portrait-image">
                            </div>

                            <!-- 名字（竖向显示） -->
                            <div class="tombstone-gallery">
                                <TombstoneInfo
                                    :name="muDetail.name"
                                    epitaph="之墓"
                                    color="#000"
                                />
                            </div>
                        </div>

                    </div>
                    <div class="tombstone-right">
                        <div class="commemorationActivities">
                            <div class="commemorationActivities_title">
                                纪念活动
                            </div>
                            <div class="commemorationActivities_content">
                                <!-- 活动列表 -->
                                <div class="commemorationActivities_list">
                                    <div class="commemorationActivities_list_item" v-for="value in leaveNoteList" :key="value.id">
                                        {{ initTime(value.create_time) }} <span style="margin-left: 5px;">{{ getTypeName(value.jidian_info.cid) }}</span>
                                    </div>
                                </div>
                                
                            </div>
                            <div class="commemorationActivities_more">
                                更多纪念
                            </div>
                        </div>
                        <div class="action-icons" >
                            <div class="action-item" @click="goToLibation('献花')">
                                <el-image style="width: 30px; height: 30px;" :src="portraitImage1" fit="contain">
                                    <template #error>
                                        <div class="icon-placeholder"></div>
                                    </template>
                                </el-image>
                                <span>献花</span>
                            </div>
                            <div class="action-item" @click="goToLibation('点烛')">
                                <el-image style="width: 30px; height: 30px;" :src="portraitImage2" fit="contain">
                                    <template #error>
                                        <div class="icon-placeholder"></div>
                                    </template>
                                </el-image>
                                <span>点烛</span>
                            </div>
                            <div class="action-item" @click="goToLibation('上香')">
                                <el-image style="width: 30px; height: 30px;" :src="portraitImage3" fit="contain">
                                    <template #error>
                                        <div class="icon-placeholder"></div>
                                    </template>
                                </el-image>
                                <span>上香</span>
                            </div>
                            <div class="action-item" @click="goToLibation('献供')">
                                <el-image style="width: 30px; height: 30px;" :src="portraitImage4" fit="contain">
                                    <template #error>
                                        <div class="icon-placeholder"></div>
                                    </template>
                                </el-image>
                                <span>献供</span>
                            </div>
                            <div class="action-item" @click="goToLibation('献歌')">
                                <el-image style="width: 30px; height: 30px;" :src="portraitImage5" fit="contain">
                                    <template #error>
                                        <div class="icon-placeholder"></div>
                                    </template>
                                </el-image>
                                <span>献歌</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tombstone-left">
                        <div class="qrcode-view">
                            <img :src="qrValue" alt="二维码" ref="qrcodeRef">
                            <el-button @click="downloadQrcode" type="primary">下载</el-button>
                        </div>
                    </div>

                </div>
            </div>
        </main>
    </div>
</template>
<script lang="ts" setup>
    import { ref } from 'vue';
    import { apiMuDetail } from '@/api/graveyard'
    import { user_join, index_share_img } from '@/api/family'
    import TombstoneInfo from './info.vue'; // 确保路径正确
    import { apiMuLeaveNoteList, apiMuJidianCate } from '@/api/leaveNote'
    import QrCodePage from '@/components/qrCodePage.vue'
    const route = useRoute() // 路由
    const router = useRouter() // 路由
    // 引入图片
	import portraitImage1 from '../../assets/images/detail_image_fllower.png'	// 替换为献花图标 URL
	import portraitImage2 from '../../assets/images/detail_image.gif'	// 替换为点烛图标 URL
	import portraitImage3 from '../../assets/images/detail_image.png'	// 替换为上香图标 URL
	import portraitImage4 from '../../assets/images/detail_image_shop.png'	// 替换为献供图标 URL
	import portraitImage5 from '../../assets/images/detail_image_audio.png'	// 替换为献歌图标 URL
    // 获取详情
    const muDetail = ref({})
    const getMuDetail = async () => {
        const res = await apiMuDetail({id: route.query.id})
        console.log(res)
        let arr = []
        if(res.mp3_url != '' && res.mp3_url){
            arr = res.mp3_url.split('.')
            res.mp3_url_type = 'audio/' + arr[arr.length - 1]
        }
        
        muDetail.value = res
    }
    // 留言列表
	const leaveNoteList = ref([])
	const leaveNoteCount = ref(0)
	const getApiMuLeaveNoteList = async () => {
		const res = await apiMuLeaveNoteList({ mu_id: route.query.id })
		console.log(res)
		leaveNoteList.value = res.list.filter((item: any, index: number) => index < 5)
		leaveNoteCount.value = res.total
	}
    // 祭祀分类
	const typeList = ref<any>([])
	const getTypeList = async () => {
		const res = await apiMuJidianCate()
        let list = res
		typeList.value = list
	}
    // 根据 cid 获取分类对应的 name
    const getTypeName = (cid: number) => {
        let name = ''
        typeList.value.forEach((item: any) => {
            if(item.id == cid){
                name = item.name
            }
        })
        return name
    }

    // 根据传进来的 时间 create_time: "2025-08-22 15:55:31"来初始化为 xxxx/xx/xx 格式
    // 2025-08-22 15:55:31 转换为 2025/08/22
    const initTime = (time: string) => {
        let arr = time.split(' ')
        return arr[0].replace('-', '/')
    }
    // 显示二维码
    const qrValueUrl = ref(`https://cqjsyh.com/H5/pages/detail/index?id=${route.query.id}`)
    const qrValue = ref('')
    const isShowQrCode = ref(false)
    const qrCodeInfo = ref<any>(null)
    const showQrCode = async () => {

        // 获取二维码图片URL
        const res = await index_share_img({ url: qrValueUrl.value })
        qrValue.value = res.url
        isShowQrCode.value = true
    }

    const goToLibation = (title: string) => {
		// 你可以在这里实现跳转逻辑
		router.push('/libation' + '?mu_id=' + route.query.id + '&title=' + title)
	}

    // 二维码引用
    const qrcodeRef = ref<HTMLElement | null>(null);
    // 下载二维码
    const downloadQrcode = async () => {
        if (!qrcodeRef.value) return;
        await nextTick();

        const img = qrcodeRef.value as HTMLImageElement;

        // 创建 canvas
        const canvas = document.createElement('canvas');
        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;

        const ctx = canvas.getContext('2d');
        if (!ctx) {
            console.error('无法获取 2D 上下文');
            return;
        }

        // 绘制图片
        ctx.drawImage(img, 0, 0);

        // 导出为 blob
        canvas.toBlob((blob) => {
            if (!blob) {
                console.error('生成图片 blob 失败');
                return;
            }

            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'qrcode.png';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }, 'image/png');
    };
    // 点击导航栏切换下面的信息
	const tabChange = async (index: number, pageType: string) => {
		if(index == 5){
			router.push('/createMemorial')
		} else if (index == 6) {
			router.push('/')
		} else if (index == 7) {
			// router.push('/muDetail?id=' + route.query.id)
			const targetRouteLocationForButton = {
				name: 'muDetail',
				query: { id: route.query.id },
			};
			const resolvedRouteForButton = router.resolve(targetRouteLocationForButton);
			console.log(resolvedRouteForButton)
			// 使用 window.open 打开新标签页
			window.open(resolvedRouteForButton.href, '_blank');
		}else{
			router.push('/memorialDetail?id=' + route.query.id + '&type=' + pageType)
		}
	}
    onMounted(() => {
        getMuDetail()
        getTypeList()
        getApiMuLeaveNoteList()
        showQrCode()
    })
</script>
<style scoped>
.ordinaryIndex {
    width: 100vw;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    background: #D4D2E9 url(../../assets/images/ordinaryIndex_bg.jpg) no-repeat top center;
}

.ordinaryIndex_main {
    width: 1000px;
    height: 100%;
    margin: 0 auto;
    padding-top: 30px;
    padding-bottom: 20px;
}

/* 横向滚动横幅 */
.banner-scroll {
    width: 100%;
    /* height: 50px; */
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;

    color: #333333;
    font-size: 22px;
    FONT-FAMILY: KaiTi, DFKai-SB, KaiTi_GB2312, SimKai, SimLi, LiSu, "华文行楷", "楷体", "楷体_GB2312", "隶书";
}

@keyframes scroll-left {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}



/* 主要内容区域 */
.main-content {
    width: 1000px;
    margin: 0 auto;
    position: relative;
}

.cemetery-background {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    /* left: calc(50% - 273px); */

}

/* 墓碑区域 */
.tombstone-area {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
}

.tombstone {
    position: absolute;
    top: 50px;
    left: calc(50% - 273px);
    width: 546px;
    height: 100%;
}


.tombstone-body {
    

    padding: 30px 20px;
    text-align: center;
    height: calc(100% - 80px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.portrait-frame {
    width: 100px;
    height: 72px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portrait-image {
    width: 64px;
    height: 100%;
    object-fit: cover;
}

.name-vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
}

.name-text {
    font-size: 28px;
    font-weight: bold;
    color: #2c3e50;
    letter-spacing: 3px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}




#mubei_top_Menu {
    height: 34px;
}

#mubei_top_Menu .mubei_top_Menu_list {
    margin: 0 auto;
    padding: 0;
    width: 770px;
    list-style: none;
    display: flex;
    align-items: center;
}

#mubei_top_Menu .mubei_top_Menu_list .mu_an {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}



#mubei_top_Menu .mubei_top_Menu_list .mu_an {
    width: 101px;
    height: 32px;
    margin-right: 10px;
    background: url(../../assets/images/buttonBg.jpg) no-repeat top left;
    text-align: center;
    display: flex;
    align-items: center;
    cursor: pointer;
}
#mubei_top_Menu .mubei_top_Menu_list .mu_an span{
    line-height: 32px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

#mubei_top_Menu .mubei_top_Menu_list .mu_an:hover {
    width: 101px;
    height: 32px;
    margin-right: 10px;
    background: url(../../assets/images/buttonBg.jpg) no-repeat bottom left;
    text-align: center;
    display: flex;
    align-items: center;
    cursor: pointer;
}

#mubei_top_Menu .mubei_top_Menu_list .mu_an.mu_an1 {
    background: url(../../assets/images/buttonBg.jpg) no-repeat bottom left;
    text-align: center;
}
.tombstone-right{
    position: absolute;
    bottom: 120px;
    right: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.action-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    /* Space between icons */
}

.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    color: #333;
}

.action-item span {
    margin-top: 5px;
    color: #000;
}

.commemorationActivities{
    width: 120px;
    border: 2px solid #999;
    border-radius: 10px;
    margin-bottom: 30px;
}
.commemorationActivities_title{
    font-size: 14px;
    font-weight: bold;
    color: #000;
    letter-spacing: 3px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #000;
    box-sizing: border-box;
}
.commemorationActivities_content{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}
.commemorationActivities_list{
    display: flex;
    flex-flow: column;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    font-size: 12px;
}
.commemorationActivities_more{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    box-sizing: border-box;
    cursor: pointer;
    border-top: 1px solid #2c3e50;
}

.tombstone-left{
    position: absolute;
    bottom: 120px;
    left: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.qrcode-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.qrcode-view img {
  max-width: 100px;
  max-height: 100px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: #fff;
}
</style>